<template>
	<div class="background">
		<div class="login">
			<div class="box">
				Four Group System
				<p></p>
			  <el-form :model="employee" label-width="100px">
			    <el-form-item label="用户">
			      <el-input v-model="employee.eId" placeholder="请输入员工号" ></el-input>
			    </el-form-item>
			    <el-form-item label="密码">
			      <el-input v-model="employee.ePassword" placeholder="请输入密码"></el-input>
			    </el-form-item>
			    <el-form-item>
			      <el-button type="primary" size="medium" @click="submit">登 录</el-button>
			    </el-form-item>
			  </el-form>
			</div>
		</div>
	</div>
</template>

<script>
	
	import qs from 'qs'
	import {ElMessage} from 'element-plus'
	export default{
		data(){
			return{
				employee:{}
			}
		},
		methods:{
			submit(){
				let that=this
				let str=qs.stringify(that.employee)
				
				that.$axios.get("http://localhost:8080/employee/login?"+str).then(function(res){
					if(res.data!=null&&res.data!='')
					{
						//将登录成功的用户信息，共享到vuex中
						console.log(res.data)
						that.$store.commit('user',res.data.ename)
						that.$router.push("/Index")
					}else{
						ElMessage.error('登录失败，请重新登录')
					}
				})
			}
		}
	}
	// import {
	//   reactive,
	//   ref,
	//   unref
	// } from 'vue'
	// export default {
	//   setup(props) {
	//     const ruleFormsss = ref(null);
	//     // 定义变量
	//     const ruleForm = reactive({
	//       username: '',
	//       password: ''
	//     })
	 
	//     const rules = {
	//       username: [
	//         { required: true, message: '请输入用户名', trigger: 'blur' },
	//       ],
	//       password: [
	//         { required: true, message: '请输入密码', trigger: 'blur' },
	//       ]
	//     }
	 
	//     const submitForm = async () => {
	//       const form = unref(ruleFormsss);
	//       if (!form) return
	//       try {
	//         await form.validate()
	//         const { username, password } = ruleForm
	//         console.log(username, password)
	//       } catch (error) {
	//       } 
	//     }
	//     return {
	//       ruleForm,
	//       rules,
	//       submitForm,
	//       ruleFormsss
	//     }
	//   }
	// }
</script>

<style>
	body{
		background-color: rgba(224, 224, 224, 1);
		background-image: url(../assets/VCG4190406060.jpg);
		background-size: 100%;
	}
	
	.login{
		float: right;
		margin-top: 250px;
		margin-right: 80px;
		background-color: rgba(0, 0, 0, 0.2);
	}
	
	.box{
		float: right;
		margin-top: 10px;
		margin-right: 20px;
		font-size: 25px;
	}
</style>